<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球机选</title>
		<script>
			// 取随机值
			function random(arr){
				let index = Math.floor(Math.random() * arr.length)
				let num = arr[index]
				arr.splice(index, 1)
				return num
			}
			// 机选
			function select(){
				// 预制球
				let reds = new Array()
				let blues = new Array()
				for (var i = 1; i < 34; i++) {
					reds.push(i)
				}
				for (var i = 1; i < 17; i++) {
					blues.push(i)
				}
				// 随机
				let nums = new Array()
				for (var i = 0; i < 6; i++) {
					nums.push(random(reds))
				}
				nums.push(random(blues))
				return nums
			}
			// 操作
			function handleSelect(){
				let $table = document.getElementsByTagName('table')[0]
				let $trs = ''
				for (let i = 0; i < 5; i++) {
					let nums = select()
					let reds = nums.slice(0,6).sort((a, b) => a - b)
					let blue = nums[6]
					$trs += `
						<tr>
							<td class="red"><span>${reds[0]}</span></td>
							<td class="red"><span>${reds[1]}</span></td>
							<td class="red"><span>${reds[2]}</span></td>
							<td class="red"><span>${reds[3]}</span></td>
							<td class="red"><span>${reds[4]}</span></td>
							<td class="red"><span>${reds[5]}</span></td>
							<td class="blue"><span>${blue}</span></td>
						</tr>
					`
				} 
				$table.innerHTML = $trs 
			}
		</script>
		<style>
			.button{
				color: #FFF;
				background-color: #409EFF;
				border-color: #409EFF;
				cursor: pointer;
				line-height: 1;
				transition: .1s;
				padding: 9px 15px;
				font-size: 12px;
				border-radius: 3px;
				text-align: center;
			}
			table{
				margin-top: 12px;
				width: 360px;
				border-collapse: collapse;
				border-spacing: 0;
				table-layout: fixed;
			}
			td{
			  border: 1px solid #e6e6e6;
			  padding: 9px 15px;
			  font-size: 14px;
			  text-align: center;
			}
			td > span{
				color: #FFF;
				width: 28px;
				height: 28px;
				line-height: 28px;
				display: block;
				border-radius: 50%;
			}
			.red span{
				background-color: red;
			}
			.blue span{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<button class="button" onclick="handleSelect()">机选</button>
        <button class="button" onclick="window.open('https://www.cwl.gov.cn/ygkj/wqkjgg/')">查询</button>
		<table></table>
	</body>
</html>